<template>
  <view class="history-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <image class="header-bg" src="/static/banner/history.png" mode="aspectFill" />
      <view class="header-title">
        <text>宗祠历史</text>
      </view>
    </view>

    <!-- 历史时间线 -->
    <view class="history-timeline">
      <view v-for="(period, index) in historyPeriods" :key="index" class="time-period">
        <view class="period-title">{{ period.era }}</view>
        <view class="period-events">
          <view v-for="(event, eventIndex) in period.events" :key="eventIndex" class="event-item">
            <view class="event-year">{{ event.year }}</view>
            <view class="event-content">
              <view class="event-title">{{ event.title }}</view>
              <view class="event-desc">{{ event.description }}</view>
              <view v-if="event.images && event.images.length > 0" class="event-images">
                <image
                  v-for="(img, imgIndex) in event.images"
                  :key="imgIndex"
                  :src="img"
                  mode="aspectFill"
                  class="event-image"
                  @click="previewImage(event.images, img)"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 历史时期数据
const historyPeriods = ref([
  {
    era: "明代时期",
    events: [
      {
        year: "1522年",
        title: "宗祠初建",
        description:
          "李氏宗祠始建于明朝嘉靖年间，由李姓先祖李德华主持修建。当时规模较小，仅有正厅和两侧厢房。",
        images: ["/static/history/1522.png"],
      },
      {
        year: "1567年",
        title: "第一次扩建",
        description: "随着家族人口增多，在李世贤主持下进行了第一次扩建，增加了后堂和祭祖厅。",
        images: [],
      },
      {
        year: "1598年",
        title: "抗倭事件",
        description: "倭寇入侵沿海地区，李氏族人组织抗击，保卫家园。宗祠曾短暂作为防御指挥所。",
        images: ["/static/history/1598.png"],
      },
    ],
  },
  {
    era: "清代时期",
    events: [
      {
        year: "1689年",
        title: "大规模重修",
        description:
          "清康熙年间，宗祠进行第一次大规模修缮，扩建为现在的规模。增加了戏台、花厅等建筑，并修建了围墙。",
        images: ["/static/history/1689.png"],
      },
      {
        year: "1745年",
        title: "乾隆皇帝赐匾",
        description: '乾隆皇帝南巡途经此地，赏赐"忠孝传家"匾额，表彰李氏家族的忠诚与孝道。',
        images: ["/static/history/1745.png"],
      },
      {
        year: "1832年",
        title: "族谱续修",
        description:
          "在族长李文正的主持下，对族谱进行大规模续修，记录了家族自宋代以来的迁徙和发展。",
        images: [],
      },
      {
        year: "1886年",
        title: "灾后重建",
        description: "宗祠遭遇台风袭击，部分建筑受损。在全族人共同努力下，次年完成修复。",
        images: [],
      },
    ],
  },
  {
    era: "民国至今",
    events: [
      {
        year: "1911年",
        title: "辛亥革命",
        description: "辛亥革命后，宗祠曾短暂用作地方学堂，培养新式人才。",
        images: [],
      },
      {
        year: "1937年",
        title: "抗日战争",
        description: "抗日战争爆发，宗祠一度改作民众集会和伤员救治场所。",
        images: ["/static/history/1937.png"],
      },
      {
        year: "1982年",
        title: "文物保护",
        description: "被列为省级文物保护单位，开始系统性保护和修缮。",
        images: [],
      },
      {
        year: "2008年",
        title: "现代化保护",
        description: "进行现代化保护修缮工程，恢复古建筑原貌，增设消防、监控等设施。",
        images: ["/static/history/2008.png"],
      },
      {
        year: "2018年",
        title: "文化传承基地",
        description: '被评为"全国优秀传统文化传承基地"，开展多项传统文化教育活动。',
        images: ["/static/history/2018.png"],
      },
      {
        year: "2023年",
        title: "数字化保护",
        description: "启动宗祠数字化保护项目，对建筑和文物进行3D扫描和数字化保存。",
        images: [],
      },
    ],
  },
]);

// 图片预览
const previewImage = (images: string[], current: string) => {
  uni.previewImage({
    urls: images,
    current,
  });
};
</script>

<style lang="scss">
.history-page {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 30rpx;
}

.page-header {
  position: relative;
  height: 300rpx;
  overflow: hidden;

  .header-bg {
    width: 100%;
    height: 100%;
  }

  .header-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30rpx;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);

    text {
      color: #fff;
      font-size: 40rpx;
      font-weight: bold;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    }
  }
}

.history-timeline {
  padding: 30rpx;

  .time-period {
    margin-bottom: 50rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .period-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
      background-color: #fff;
      padding: 20rpx;
      border-radius: 10rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .period-events {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50rpx;
        width: 2rpx;
        height: 100%;
        background-color: #ddd;
        z-index: 0;
      }
    }
  }
}

.event-item {
  position: relative;
  display: flex;
  margin-bottom: 30rpx;
  z-index: 1;

  .event-year {
    width: 100rpx;
    height: 100rpx;
    background-color: #1989fa;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 28rpx;
    flex-shrink: 0;
    margin-right: 30rpx;
    box-shadow: 0 4rpx 10rpx rgba(25, 137, 250, 0.3);
  }

  .event-content {
    flex: 1;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    .event-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .event-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 15rpx;
    }

    .event-images {
      display: flex;
      flex-wrap: wrap;

      .event-image {
        width: calc(33.33% - 10rpx);
        height: 160rpx;
        margin: 5rpx;
        border-radius: 6rpx;
      }
    }
  }
}
</style>
